<template>
  <div class="home_box">
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in imgBannerList" :key="item.id">
        <img :src="item.img" alt>
      </mt-swipe-item>
    </mt-swipe>
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="./home/newsList">
          <img src="../../assets/menu1.png" alt>
          <div class="mui-media-body">新闻列表</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="./home/photoList">
          <img src="../../assets/menu2.png" alt>
          <div class="mui-media-body">精选图片</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/productList">
          <img src="../../assets/menu3.png" alt>
          <div class="mui-media-body">商品购买</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../../assets/menu4.png" alt>
          <div class="mui-media-body">Home</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../../assets/menu5.png" alt>
          <div class="mui-media-body">Home</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../../assets/menu6.png" alt>
          <div class="mui-media-body">Home</div>
        </a>
      </li>
    </ul>
  </div>
</template>
    
<script>
export default {
  data() {
    return {
      imgBannerList: []
    };
  },
  created() {
    this.getBanner();
  },
  methods: {
    getBanner() {
      this.$http
        .get("api/getlunbo")
        .then(res => {
          this.imgBannerList = res.body.message;
        });
    }
  }
};
</script>

<style lang="less">
.mint-swipe {
  height: 200px !important;
  img {
    width: 100%;
    height: 100%;
  }
}
.mui-table-view {
  background-color: #fff!important;
  li {
    border: none!important;
    img {
      width: 60px;
      height: 60px;
    }
  }
}
</style>